<template>
	<view class="container">
		<!-- 顶部导航栏 -->
<!-- 		<view class="nav-bar">
			<view class="left">
				<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			</view>
			<view class="title">风险/健康评估</view>
		</view> -->
		
		<!-- 内容区域 -->
		<scroll-view class="content-scroll" scroll-y style="height: 100%; padding-bottom: 100rpx;" :bounce="true">
			<view class="content">
				<!-- 顶部卡片 -->
				<view class="welcome-card">
					<view class="welcome-text">
						<text class="greeting">您好!</text>
						<text class="subtitle">欢迎使用卒中风险评估工具</text>
					</view>
					<image class="welcome-image" src="/static/assessment-icon.png" mode="aspectFit"></image>
				</view>
				
				<!-- 风险评估站 -->
				<view class="section">
					<view class="section-header">
						<text class="section-title">脑卒中复发风险评估</text>
					</view>
					<view class="assessment-card" @click="goToAssessment('Essenstroke',questionaireList[5].id)">
						<view class="card-icon" style="background-color: #CC99E6;">
							<image src="/static/assessment/assessment.png" class="icon-image" mode="aspectFit"></image>
						</view>
						<view class="card-content">
							<view class="report-info">
								<text class="card-name">{{questionaireList[5].name}}</text>
							</view>
							<view class="report-count">
								<text class="card-desc">评估脑卒中发生风险</text>
							</view>
						</view>
					</view>
					<view class="assessment-card" @click="goToAssessment('stroke')">
						<view class="card-icon" style="background-color: #FF6B6B;">
							<image src="/static/assessment/assessment.png" class="icon-image" mode="aspectFit"></image>
						</view>
						<view class="card-content">
							<view class="report-info">
								<text class="card-name">脑卒中风险评估（5-10年）</text>
							</view>
							<view class="report-count">
								<text class="card-desc">评估5年内与10年内发生卒中的风险程度</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 健康评估 -->
				<view class="section">
					<view class="section-header">
						<text class="section-title">健康评估</text>
					</view>
					<view class="card-grid">
						<view class="grid-item" @click="goToAssessment('recurrence',questionaireList[0].id)">
							<view class="card-icon" style="background-color: #F5A623;">
								<image src="/static/assessment/assessment.png" class="icon-image" mode="aspectFit"></image>
							</view>
							<text class="item-name">{{questionaireList[0].name}}</text>
							<!-- <u-icon v-if="completedAssessments.recurrence" name="checkmark-circle" color="#1890FF" size="20"></u-icon> -->
						</view>
						<view class="grid-item" @click="goToAssessment('decision',questionaireList[1].id)">
							<view class="card-icon" style="background-color: #4CD964;">
								<image src="/static/assessment/assessment.png" class="icon-image" mode="aspectFit"></image>
							</view>
							<text class="item-name">{{questionaireList[1].name}}</text>
						</view>
						<view class="grid-item" @click="goToAssessment('health',questionaireList[2].id)">
							<view class="card-icon" style="background-color: #1890FF;">
								<image src="/static/assessment/assessment.png" class="icon-image" mode="aspectFit"></image>
							</view>
							<text class="item-name">{{questionaireList[2].name}}</text>
							<!-- <u-icon v-if="completedAssessments.decision" name="checkmark-circle" color="#1890FF" size="20"></u-icon> -->
						</view>
						<view class="grid-item" @click="goToAssessment('efficacy',questionaireList[3].id)">
							<view class="card-icon" style="background-color: #50C1E9;">
								<image src="/static/assessment/assessment.png" class="icon-image" mode="aspectFit"></image>
							</view>
							<text class="item-name">{{questionaireList[3].name}}</text>
                    </view>
                    </view>
                </view>
				
				<!-- 历史报告 -->
<!-- 				<view class="section">
					<view class="section-header">
						<text class="section-title">历史报告</text>
					</view>
					<view class="report-cards">
						<view class="report-card" @click="goToReportList('risk')">
							<view class="report-icon" style="background-color: #FF6B6B;">
								<u-icon name="file-text" size="32" color="#fff"></u-icon>
							</view>
							<view class="report-info">
								<text class="report-name">风险评估报告</text>
							</view>
							<u-icon name="arrow-right" color="#999" size="24"></u-icon>
						</view>
						<view class="report-card" @click="goToReportList('health')">
							<view class="report-icon" style="background-color: #50C1E9;">
								<u-icon name="file-text" size="32" color="#fff"></u-icon>
							</view>
							<view class="report-info">
								<text class="report-name">健康评估报告</text>
							</view>
							<u-icon name="arrow-right" color="#999" size="24"></u-icon>
                        </view>
                     </view>
                </view> -->
			</view>
		</scroll-view>
		<!-- 自定义tabBar -->
		<custom-tabbar v-if="showCustomTabBar"></custom-tabbar>
    </view>
</template>

<script>
import { getQuestionaireList } from '../../common/api'
export default {
    data() {
        return {
			questionaireList:[],
			showCustomTabBar: true, // 显示自定义TabBar
				completedAssessments: {
					stroke: false,
					recurrence: false,
					efficacy: false,
					decision: false,
					health: false
				},
				reports: {
					risk: 0,
					health: 0
				}
			}
		},
		onLoad() {
			this.loadQuestionaireList();
			  uni.$on('page-show', () => {
			    if (!this.shouldUpdate) return;
			    this.updateTabBar();
			  });
		},
		onShow() {
			//uni.$emit('page-show'); 执行太过于频繁
		},
    methods: {
		async loadQuestionaireList(){
			try{
				const qlRes = await getQuestionaireList()
				this.questionaireList = qlRes.rows
				console.log(qlRes.rows)
			}
			catch (e) {
			  console.error('加载问卷列表失败', e)
			}
		},
			goBack() {
				uni.navigateBack()
			},
			goToAssessment(type,id) {
				let url = ''
				switch(type) {
					case 'Essenstroke':
						// 跳转到新的脑卒中风险评估页面
						url = `/pages/assessment/stroke-risk?id=${id}`
						break
					case 'stroke':
						// 跳转到新的脑卒中风险评估页面2
						url = '/pages/assessment/qr-risk-calculate'
						break
					case 'recurrence':
						url = `/pages/assessment/recurrence?id=${id}`
						break
					case 'efficacy':
						url = `/pages/assessment/efficacy?id=${id}`
						break
					case 'decision':
						url = `/pages/assessment/decision?id=${id}`
						break
					case 'health':
						url = `/pages/assessment/behavior?id=${id}`
						break
				}
				if (url) {
					uni.navigateTo({ url })
				}
			},
			goToReportList(type) {
				let url = ''
				if (type === 'risk') {
					url = '/pages/assessment/risk-reports'
				} else if (type === 'health') {
					url = '/pages/assessment/report-index'
				}
				
				if (url) {
					uni.navigateTo({ url })
				} else {
					uni.showToast({
						title: '暂无报告',
						icon: 'none'
					})
				}
			}
    }
}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
    min-height: 100vh;
	
		.icon-image {
		  width: 50rpx;
		  height: 50rpx;
		  //margin-right: 20rpx;
		}

		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				flex: 1;
				text-align: center;
				margin-left: 60rpx;
			}
			
			.left {
				width: 60rpx;
			}
		}
		
		.content-scroll {
			flex: 1;
			height: calc(100vh - 90rpx);
		}
		
		.content {
			padding: 20rpx 30rpx;
			
			.welcome-card {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: linear-gradient(to right, #1890FF, #50C1E9);
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				color: #fff;
				
				.welcome-text {
					display: flex;
					flex-direction: column;
					
					.greeting {
						font-size: 36rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}
					
					.subtitle {
						font-size: 24rpx;
						opacity: 0.9;
					}
				}
				
				.welcome-image {
					width: 100rpx;
					height: 100rpx;
				}
			}
			
			.section {
				margin-bottom: 30rpx;
				
				.section-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.section-title {
						font-size: 34rpx;
						font-weight: bold;
						color: #333;
						position: relative;
						padding-left: 20rpx;
						
						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 8rpx;
							height: 32rpx;
							background-color: #1890FF;
							border-radius: 4rpx;
						}
					}
					
					.section-more {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						color: #999;
					}
				}
				
				.assessment-card {
            background-color: #fff;
            border-radius: 16rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
                display: flex;
                align-items: center;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
                
					.card-icon {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    display: flex;
						justify-content: center;
                    align-items: center;
                    margin-right: 20rpx;
                }
                
					.card-content {
                    flex: 1;
                    
						.card-name {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
							margin-bottom: 8rpx;
                    }
                    
						.card-desc {
							font-size: 26rpx;
                        color: #999;
							text-align: right;
						}
					}
				}
				
				.card-grid {
					display: flex;
					flex-wrap: wrap;
					margin: 0 -10rpx;
					justify-content: center; /* 新增样式，使子元素水平居中 */
					
					.grid-item {
						width: calc(40% - 20rpx);
						background-color: #fff;
						border-radius: 16rpx;
						padding: 30rpx 20rpx;
						margin: 10rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
						
						.card-icon {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
                            display: flex;
							justify-content: center;
							align-items: center;
                            margin-bottom: 20rpx;
						}
                
						.item-name {
                            font-size: 32rpx;
							color: #333;
							font-weight: bold;
							text-align: center;
						}
						
						.u-icon {
							position: absolute;
							top: 20rpx;
							right: 20rpx;
						}
					}
				}
				
				.report-cards {
					.report-card {
						background-color: #fff;
						border-radius: 16rpx;
						padding: 30rpx;
						margin-bottom: 20rpx;
                display: flex;
                align-items: center;
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
						transition: all 0.3s ease;
						position: relative;
						overflow: hidden;
						
						&:active {
							transform: scale(0.98);
							box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
						}
						
						.report-icon {
							width: 80rpx;
							height: 80rpx;
							border-radius: 16rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 20rpx;
							flex-shrink: 0;
						}
						
						.report-info {
							flex: 1;
							
							.report-name {
								font-size: 32rpx;
								font-weight: bold;
								color: #333;
								margin-bottom: 8rpx;
							}
						}
						
						.report-count {
							margin-right: 20rpx;
							
							text {
								font-size: 28rpx;
								color: #999;
								font-weight: bold;
							}
							.card-desc {
								font-size: 26rpx;
							color: #999;
								text-align: right;
							}
                    }
                }
            }
        }
    }
}
</style> 